<template>
  <div class="number">
    <van-picker
      ref="picker"
      class="picker"
      show-toolbar
      v-model="selectVal"
      :title="title"
      :columns="columns"
      @change="onChange"
      @confirm="onConfirm"
      @cancel="onCancel"
    >
      
    </van-picker>
  </div>
</template>
 
<script>
import { Picker } from 'vant';
export default {
  components: { [Picker.name]: Picker },
  name: 'Number',
  props: {
    title: {
      type: String,
      default: ''
    },
    nextLongYear: {
      type: Number,
      default: 1
    },
    prevLongYear: {
      type: Number,
      default: 64
    }
  },
  data () {
    return {
      columns: [],
      selects: '',
      selectVal: []
    }
  },
  created () {
    this.initTimeFn()
    console.log(this.columns)
  },
  computed: {
    years() {
      const currentDate = new Date();
      let startYear = currentDate.getFullYear() - this.prevLongYear; // 起始年份
      let endYear = currentDate.getFullYear() + this.nextLongYear; // 结束年份
      return Array.from({ length: (endYear - startYear + 1)}, (_, i) => startYear + i).map(key => ({ text: key + "年", value: key})).reverse();
    },
    months() {
      return [...Array(12).keys()].map(key => ({ text: ++key + "月", value: key}));
    },
  },
  methods: {
    initTimeFn () {
      const date = new Date(this.years[0].value, this.months[0].value, 0);
      this.columns = [
        this.years,
        // 第二列
        this.months,
        Array.from({ length: date.getDate()}, (_, i) => i = ++i).map(key => ({ text: key + "日", value: key}))
      ]
      let [year, month, day] = this.columns
      console.log(year, month, day, 'year, month, day')
      this.selects = `${year[0].value}-${this.prefixInteger(month[0].value, 2)}-${this.prefixInteger(day[0].value, 2)}`

      console.log(this.columns)
      console.log()
    },
    onCancel () {
      this.$emit('on-cancel', this.selects)
    },
    onConfirm () {
      this.$emit('on-success', this.selects)
    },
    onChange (picker) {
      let { columnIndex, selectedIndexes, selectedValues } = picker

      console.log(picker, selectedIndexes, selectedValues)
      this.selects = `${selectedValues[0]}-${this.prefixInteger(selectedValues[1], 2)}-${this.prefixInteger(selectedValues[2], 2)}`
      if (columnIndex === 1) {
        const date = new Date(selectedValues[0], selectedValues[1], 0);
        this.columns[2] = Array.from({ length: date.getDate()}, (_, i) => i = ++i).map(key => ({ text: key + "日", value: key})),
        this.selects =`${selectedValues[0]}-${this.prefixInteger(selectedValues[1], 2)}-01`
        console.log('234234234', this.selects)
        // this.$refs.picker.setColumnIndex(2, 0)
        this.selectVal = [selectedValues[0], selectedValues[1], 1]
      }

     
      // picker.setColumnValues(1, this.checkTime[values[0]])
    },
    prefixInteger(num, length) {
      return (Array(length).join('0') + num).slice(-length);
    }
  }
}
</script>
 
<style lang="scss">
.number {
  font-family: WDCH-Regular;
  .picker {
    border: 1px solid pink;
  }
}
.txt {
  font-size: 16px;
}
</style>